<template>
    <h1>我是APP组件</h1>

    <h1>$store.state.数据名</h1>
    <h4>{{ $store.state.num }}</h4>
    <h4>{{ $store.state.num2 }}</h4>
    <h4>{{ $store.state.num3 }}</h4>

    <!-- 3. 使用 辅助函数结构出来的数据 -->
    <h1>通过辅组函数mapState简化</h1>
    <h4>{{ num }}</h4>
    <h4>{{ num3 }}</h4>
</template>

<script>
//1，导入辅助函数
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        // 2. 使用辅助函数帮助我们将 vuex 中的数据 结构到 我们的计算属性中     ...mapState([XXX, YYY, ZZZ])
        ...mapState(['num', 'num3'])
    },
    mounted () {
        console.log(this.$store);
    },
}
</script>

<style></style>
